<template>
    <div>
        <div class="container">
            <el-card class="box-card cardItem" v-for="(card, index) in cardList1" :key="index">
                <template #header>
                    <div class="card-header">
                        <span>{{ card.title }}</span>
                        <el-button
                            class="button"
                            type="text"
                            @click="addForm(card, index)"
                        >{{ card.btnName }}</el-button>
                    </div>
                </template>
                <el-table :data="card.contentList" :show-header="false" style="width: 100%">
                    <el-table-column prop="name" label="框图名称" width="150" />
                    <el-table-column label="设置" width="50">
                        <template #default="scope">
                            <el-button
                                type="text"
                                @click="addItem(card, index, scope.row, scope.$index)"
                            >设置</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="50">
                        <template #default="scope">
                            <el-button
                                type="text"
                                @click="deleteItem(card, index, scope.row, scope.$index)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <!-- 固定新增card -->
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>{{ title }}</span>
                        <el-button class="button" type="text" @click="showInput">{{ btnName }}</el-button>
                    </div>
                </template>
                <div v-if="isShow">
                    <el-input id="listName" placeholder="请输入列表名称" v-model="listName"></el-input>
                    <el-button
                        type="primary"
                        size="mini"
                        style="margin-top: 1rem"
                        @click="addCard"
                    >保存</el-button>
                </div>
            </el-card>
        </div>
        <div></div>

        <el-dialog v-model="dialogFormVisible" title="设置表单">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="选择系统" :label-width="formLabelWidth" prop="systemName">
                    <el-select v-model="form.systemName" placeholder="请选择系统" style="width: 100%">
                        <el-option
                            v-for="(item ,idx) in list"
                            :label="item.label"
                            :value="item.label"
                            :key="idx"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否为标题" :label-width="formLabelWidth" prop="isTitle">
                    <el-radio-group v-model="form.isTitle" style="width: 100%;text-align: left">
                        <el-radio label="是">是</el-radio>
                        <el-radio label="否">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    v-if="form.isTitle === '否'"
                    label="选择表单"
                    :label-width="formLabelWidth"
                    prop="tableName"
                >
                    <el-select
                        v-model="form.tableName"
                        placeholder="请选择表单"
                        style="width: 100%"
                        @change="handleSelectTable"
                    >
                        <el-option
                            v-for="(input, index) in inputList"
                            :key="index"
                            :label="input.name"
                            :value="input"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题名称" :label-width="formLabelWidth" prop="titleName">
                    <el-input v-model="form.titleName" placeholder="请输入标题名称"></el-input>
                </el-form-item>
                <div v-if="form.isTitle === '否'">
                    <!-- <el-form-item label="设置周期" :label-width="formLabelWidth" prop="date">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.date"
                            type="daterange"
                            value-format="YYYY-MM-DD"
                            range-separator="-"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                        ></el-date-picker>
                    </el-form-item>-->
                    <!-- <el-form-item label="设置频次" :label-width="formLabelWidth" prop="frequency">
                        <div style="display: flex">
                            <el-select
                                v-model="form.frequency"
                                placeholder="请选择设置频次"
                                style="width: 28%"
                                @change="handleChangeFrequency"
                            >
                                <el-option
                                    v-for="(frequency, index) in frequencyList"
                                    :key="index"
                                    :label="frequency"
                                    :value="frequency"
                                ></el-option>
                            </el-select>
                            <el-radio-group
                                v-model="form.frequency2"
                                style="margin: 0 1rem;width: 44%"
                                @change="handleRadio"
                            >
                                <el-radio label="每天" v-if="form.frequency == '按天'">每天</el-radio>
                                <el-radio label="每周">每周</el-radio>
                                <el-radio label="每月">每月</el-radio>
                                <el-radio label="每年">每年</el-radio>
                            </el-radio-group>
                            <el-select
                                v-model="form.frequency3"
                                placeholder="请选择频次"
                                style="width: 28%"
                            >
                                <el-option
                                    v-for="(input, index) in frequencyCycleList"
                                    :key="index"
                                    :label="input.label"
                                    :value="input.label"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-form-item>-->
                    <!-- <el-form-item label="设置次数" :label-width="formLabelWidth" prop="count">
                        <el-input v-model="form.count" disabled></el-input>
                    </el-form-item>-->
                    <el-form-item
                        label="是否参与百分比计算"
                        :label-width="formLabelWidth"
                        prop="isPercentageCount"
                    >
                        <el-radio-group
                            v-model="form.isPercentageCount"
                            style="width: 100%;text-align: left"
                        >
                            <el-radio label="是">是</el-radio>
                            <el-radio label="否">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleCommit('ruleForm')">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
// defineProps 接收
import { defineProps, ref, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    props: {
        title: String,
        btnName: String,
        cardList: Array,
        systemName: String,
    },
    data() {
        return {
            listName: '',
            isShow: false,
            cardList1: this.cardList,
            dialogFormVisible: false,
            formLabelWidth: '150px',
            value1: '',
            list: [{
                label: 'CRM',
                value: 'CRM',
            }, {
                label: '采购系统',
                value: '采购系统',
            }],
            rules: {
                systemName: [
                    {
                        required: true,
                        message: '请选择系统',
                        trigger: 'change',
                    },
                ],
                isTitle: [{
                    required: true,
                    message: '请选择是否为标题', trigger: 'change'
                }],
                count: [{
                    required: true,
                    message: '请输入设置次数', trigger: 'blur'
                }],
                tableName: [
                    {
                        required: true,
                        message: '请选择表单',
                        trigger: 'change',
                    },
                ],
                titleName: [{
                    required: true,
                    message: '请输入标题名称', trigger: 'blur'
                }],
                isPercentageCount: [
                    {
                        required: true,
                        message: '请选择是否参与百分比计算',
                        trigger: 'change',
                    },
                ],
            },
            form: {
                name: '',
                createUser: '',
                createTime: '',
                systemName: '',
                isTitle: '',
                date: '',
                frequency: [],
                frequency2: [],
                frequency3: [],
                count: '',
                isPercentageCount: '',
            },
            inputList: [{
                name: '项目立项',
                value: '项目立项',
                url: '111',
            }, {
                name: '项目预算',
                value: '项目预算',
                url: '222',
            }, {
                name: '项目规划',
                value: '项目规划',
                url: '333',
            }, {
                name: '项目招采',
                value: '项目招采',
                url: '444',
            }],
            frequencyList: ['按天', '按周', '按月', '按年'],
            frequencyCycleList: [],
            index: 0,
            cardIndex: 0,
        }
    },
    setup(props) {
        const dialogFormVisible = ref(false)
        return { ...toRefs(props), dialogFormVisible }
    },
    methods: {
        showInput() {
            if (!this.systemName) {
                ElMessage({
                    message: '请先选择所属系统',
                    type: 'warning'
                })
                return
            }
            this.isShow = true
        },
        // 新增列表
        addCard() {
            this.cardList1.push({ title: this.listName, btnName: '添加表单', contentList: [] })
            this.listName = ''
            this.isShow = false
        },
        // 新增表单
        addForm(item) {
            if (!this.systemName) {
                ElMessage({
                    message: '请先选择所属系统',
                    type: 'warning'
                })
                return
            }
            item.contentList.push({ name: '' })
        },
        // 设置表单
        addItem(item, cardIndex, row, index) {
            if (!this.systemName) {
                ElMessage({
                    message: '请先选择所属系统',
                    type: 'warning'
                })
                return
            }
            this.dialogFormVisible = true
            this.form.name = item.title
            this.cardIndex = cardIndex
            this.index = index
            if (this.cardList1[cardIndex].contentList[index].form)
                this.form = this.cardList1[cardIndex].contentList[index].form
            else {
                this.form = {
                    name: '',
                    createUser: '',
                    createTime: '',
                    systemName: '',
                    isTitle: '',
                    titleName: '',
                    date: '',
                    frequency: '',
                    frequency2: '',
                    frequency3: '',
                    count: '',
                    isPercentageCount: '',
                }
            }
        },
        // 删除表单
        deleteItem(item, cardIndex, row, index) {
            ElMessageBox.confirm(
                '确定删除该条数据吗？',
                '警告',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                this.cardList1[cardIndex].contentList.splice(index, 1)
                this.$emit('handleCommit', this.cardList1)
            })
        },
        // 选择表单名称
        handleSelectTable(val) {
            this.form.tableName = val.name
            this.form.tableUrl = val.url
            // 如果不为标题，则选择的表单名称默认赋值给标题名称
            if (!this.form.titleName)
                this.form.titleName = val.name
        },
        handleRadio(val) {
            let count = 0
            if (val === '每天') {
                count = this.$moment(this.form.endTime).diff(this.form.startTime, 'days') + 1
            } else if (val === '每周') {

            } else if (val === '每月') {

            } else if (val === '每年') {

            }
            this.form.count = count
        },
        // 选择频次
        handleChangeFrequency(val) {
            let startIdx = 0, endIdx = 0, startTime = '', endTime = '', frequencyCycleList = []
            startTime = this.form.date[0]
            endTime = this.form.date[1]
            if (val === '按天') {
                startIdx = this.$moment(startTime).isoWeekday()
                endIdx = this.$moment(endTime).isoWeekday()
                let arrWeek = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
                for (let i = startIdx - 1; i <= endIdx - 1; i++) {
                    frequencyCycleList.push({
                        label: arrWeek[i]
                    })
                }
                if (this.$moment(endTime).diff(this.$moment(startTime), 'days') > 7) {
                    for (let i = 0; i < arrWeek.length; i++) {
                        frequencyCycleList.push({
                            label: arrWeek[i]
                        })
                    }
                }
            } else if (val === '按周') {
                let start = this.$moment(startTime)
                let end = this.$moment(endTime);
                let difference = end.diff(start, 'days');
                let workingDays = Math.round((difference / 7)); // 计算有几周
                for (let i = 1; i <= workingDays + 1; i++) {
                    frequencyCycleList.push({
                        label: `第${i}周`
                    })
                }
            } else if (val === '按月') {
                startIdx = this.$moment(startTime).months()
                endIdx = this.$moment(endTime).months()
                let arrMonth = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                for (let i = startIdx; i <= endIdx; i++) {
                    frequencyCycleList.push({
                        label: arrMonth[i]
                    })
                }
            } else {
                startIdx = this.$moment(startTime).years()
                endIdx = this.$moment(endTime).years()
                for (let i = startIdx; i <= endIdx; i++) {
                    frequencyCycleList.push({
                        label: i + '年'
                    })
                }
            }
            this.frequencyCycleList = frequencyCycleList
        },
        // 弹出框确定
        handleCommit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogFormVisible = false
                    this.form.createUser = localStorage.getItem('userName')
                    this.form.createTime = this.$moment().format('YYYY-MM-DD')
                    this.cardList1[this.cardIndex].contentList[this.index].name = this.form.titleName
                    this.cardList1[this.cardIndex].contentList[this.index].form = this.form
                    this.form = {
                        name: '',
                        createUser: '',
                        createTime: '',
                        systemName: '',
                        isTitle: '',
                        titleName: '',
                        date: '',
                        frequency: [],
                        frequency2: [],
                        frequency3: [],
                        count: '',
                        isPercentageCount: '',
                    }
                    console.log("this.cardList1=====>", this.cardList1)
                    if (this.cardList1[this.cardIndex].ppcgBlockDiagarmDtlList) {
                        this.cardList1[this.cardIndex].ppcgBlockDiagarmDtlList = ''
                    }
                    this.$emit('handleCommit', this.cardList1)
                }
            })
        },
    },
}


</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 20%;
}
.container {
    display: flex;
}
.cardItem {
    margin: 0 0.5rem;
}
</style>